@extends('layouts.wechat.application')

@section('content')
    <div class="cart-index" id="more" @if (!$orders->isEmpty()) style="display: none;" @endif>
        <div style="height:1rem;"></div>

        <div class="cart-index-wrap">
            <div class="empt">
                <div class="b3">
                    <a href="/product/category" class="ui-button ui-button-disable">
                        <span>全部商品</span>
                    </a>
                    <a href="/" class="ui-button">
                        <span>精选商品</span>
                    </a>
                </div>
            </div>
        </div>
    </div>


    <div class="page-my-order" data-log="我的订单" @if ($orders->isEmpty()) style="display: none;" @endif>
        <div class="header">
            <div class="left">
                <a onclick="history.go(-1)" class="home">
                    <img src="http://s1.mi.com/m/images/m/icon_back_n.png" class="ib">
                </a>
            </div>
            <div class="tit"></div>
            <div class="right">
                <a href="/search">
                    <div class="icon icon-search"></div>
                </a>
            </div>
        </div>
        <div class="order_list">

            @foreach($orders as $order)
                <div class="ol-item" onclick="location.href='{{route('order.show',['id'=>$order->id])}}'">
                    <div>
                        <div class="oi1">
                            <div class="oi11">
                                <div class="oi111"><p><strong>订单日期：</strong><span>{{$order->created_at}}</span></p>
                                </div>
                                <div class="oi112"><p><strong>订单编号：</strong><span>{{$order->id}}</span></p></div>
                            </div>
                            <div class="oi12"><p>{{order_status($order->status)}}</p></div>
                        </div>
                        <div class="oi2">
                            <ul>

                                @foreach($order->order_products as $order_product)
                                    <li>
                                        <div class="oi21">
                                            <div class="img">
                                                <img src="{{$order_product->product->thumb}}">
                                            </div>
                                        </div>
                                        <div class="oi22"><p>{{$order_product->product->name}}</p></div>
                                    </li>
                                @endforeach

                            </ul>
                        </div>
                        <div class="oi3">
                            <p><span>共 {{$order->order_products->sum('num')}} 件商品</span>
                                <span>总金额：</span><strong> {{doubleval($order->total_price)}} 元</strong></p>
                        </div>
                        <div class="oi4">
                            <a href="javascript:;" class="org">立即付款</a>
                            <a href="/order/{{$order->id}}" data-method="delete" data-token="{{csrf_token()}}">取消订单</a>
                        </div>
                    </div>
                </div>
            @endforeach

        </div>

        @include('layouts.wechat._footer')
    </div>

@endsection

@section('js')
    <script>
        (function () {
            var lastScrollTop = 0;
            var timer = null;
            document
                .getElementById('cnt')
                .addEventListener('scroll', function (e) {
                    if (timer) {
                        clearTimeout(timer);
                        timer = null;
                    }

                    var target = e.currentTarget;
                    var listCnt = document.getElementsByClassName('listCnt')[0];
                    var loadMore = document.getElementById('loadMore');
                    var curScrollTop = target.scrollTop;
                    var scrollDown = curScrollTop - lastScrollTop > 0;
                    var scrollUp = !scrollDown;
                    var targetHeight = target.offsetHeight;
                    var listCntHeight = listCnt.offsetHeight;

                    var isEnd = curScrollTop + targetHeight === listCntHeight;
                    var isTop = curScrollTop === 0;

                    if (isTop) {
                        //想要性能好点，可以加个定时器，不要每次滚到头部都刷新
                        return loadMore.style.display = 'block';
                    }

                    if (isEnd) {
                        //停留时间请根据实际情况调整
                        timer = setTimeout(function () {
                            //loadMoreFn
                            console.info('loadMore')
                        }, 2000)
                    }
                    loadMore.style.display = 'none';
                });
        })();

    </script>
@endsection